<template>
	<div id="app">
		<router-view/>

		<div id="publicfoot" v-show="publicfootShow">
			<div class="weui-tabbar">
				<a href="javascript:;" v-for="(item, index) in pageBtn" class="weui-tabbar__item" @click="routerTo(index)" :class="chooseBtnIndex == index ? 'weui-bar__item_on' : ''">
					<router-link :to="item.url" v-if="index == 0">
						<div style="display: inline-block;position: relative;">
							<img :src="item.iconPath" alt="" class="weui-tabbar__icon">
							<span class="weui-badge" style="position: absolute; top: -2px; right: -13px;">8</span>
						</div>
						<span class="weui-tabbar__label">
							<p class="tell" :class="chooseBtnIndex == index ? 'tells' : ''">{{item.name}}</p>
						</span>
					</router-link>
					<router-link :to="item.url" v-else>
						<img :src="item.iconPath" alt="" class="weui-tabbar__icon">
						<span class="weui-tabbar__label">
							<p class="tell">{{item.name}}</p>
						</span>
					</router-link>
				</a>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'App',
		data() {
			return {
				publicfootShow: true,
				chooseBtnIndex: 0,
				pageBtn: [{
					url: '/MainIndex',
					name: '消息',
					iconPath: require('./assets/img/messages.png'),
					selectedIconPath: ''
				}, {
					url: '/FriendList',
					name: '通讯录',
					iconPath: require('./assets/img/tel.png'),
					selectedIconPath: ''
				}, {
					url: '/Learn',
					name: '知识台',
					iconPath: require('./assets/img/find.png'),
					selectedIconPath: ''
				}, {
					url: '/Work',
					name: '工作台',
					iconPath: require('./assets/img/works.png'),
					selectedIconPath: ''
				}, {
					url: '/UserMain',
					name: '我的',
					iconPath: require('./assets/img/my.png'),
					selectedIconPath: ''
				}]
			}
		},
		//当页面在指定页刷新时，路由重新加载，这是底部菜单默认展示或隐藏
		created() {
			var thisPath = this.$route.path;
			var inButtom = false;
			for(var index in this.pageBtn) {
				if(this.pageBtn[index].url === thisPath) {
					this.chooseBtnIndex = index;
					inButtom = true;
				}
			}
			this.publicfootShow = inButtom;
		},
		//当页面跳转时，路由重新加载，这是底部菜单默认展示或隐藏
		watch: {
			$route(to, from) {
				var inButtom = false;
				for(var index in this.pageBtn) {
					if(this.pageBtn[index].url === to.path) {
						inButtom = true;
					}
				}
				this.publicfootShow = inButtom;
			}
		},
		methods: {
			routerTo(num) {
				this.chooseBtnIndex = num;
			}
		},
	}
</script>

<style>
	#app {
		width: 100%;
		height: 100%;
		font-size: 1rem;
	}
	
	#publicfoot .weui-tabbar {
		height: 60px;
	}
	
	#publicfoot .weui-tabbar__icon {
		width: 21px;
		height: 21px;
	}
</style>